<template>
  <q-dialog v-model="visible" persistent>
    <q-card style="max-width: 90vw; max-height: calc(100vh - 2rem)">
      <q-card-section class="flex">
        <div class=text-h6>{{state?'修改':'新增'}}机床</div>
        <q-space/>
        <q-btn icon="close" dense flat round v-close-popup/>
      </q-card-section>
      <q-separator/>
      <div style="max-height: calc(100vh - 10rem); overflow-y: auto;min-width: 16rem">
        <q-card-section class="q-gutter-y-sm">
          <q-input v-model="tool.customerNum" outlined label="编号"/>
          <q-select
            :use-input="!tool.groupName"
            outlined behavior="menu"
            v-model="tool.groupName"
            :options="optionGroupName" @new-value="newGroup"
            label="选择或新增机床组" clearable
          />
          <q-input v-model="tool.processingCycle" type="number" outlined label="加工时长/ms"/>
        </q-card-section>
      </div>
      <q-slide-transition>
        <q-card-section class="q-pa-none row">
          <q-btn stretch color="primary" class="col" label="修改机床" @click="updateTool"/>
        </q-card-section>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { api } from 'boot/axios'
import { useQuasar } from 'quasar'
import { useAPIStore } from 'stores/api'

const visible = ref(false)
const state = ref(true)
const $q = useQuasar()
const tool = ref({
  customerNum: '',
  processingCycle: '',
  groupName: '',
  id: ''
})
const optionGroupName = ref([])
defineExpose({ show })
const emit = defineEmits(['update'])
function show (data) {
  visible.value = true
  tool.value = data
  getGroupName()
}

// 修改信息
function updateTool () {
  const tools = {
    id: tool.value.id,
    customerNum: tool.value.customerNum,
    groupName: tool.value.groupName,
    processingCycle: tool.value.processingCycle
  }
  api.put(useAPIStore().taskUrl + 'machine/data/update', tools).then(rs => {
    if (rs.data.code === 200) {
      $q.notify({
        message: '机床数据修改成功',
        type: 'positive'
      })
      emit('update')
      visible.value = false
    } else {
      $q.notify({ message: '机床数据修改失败', type: 'negative' })
    }
  })
}
//
function getGroupName () {
  api.get(useAPIStore().taskUrl + 'machine/data/group').then(rs => {
    if (rs.data.code === 200) {
      optionGroupName.value = rs.data.data
    } else {
      $q.notify({ message: '机床组获取失败', type: 'negative' })
    }
  })
}
function newGroup (val, done) {
  if (!optionGroupName.value.includes(val)) {
    optionGroupName.value.push(val)
    done(val, 'add-unique')
  }
}

</script>
<style scoped>

</style>
